<template>
  <div class="chat-room">
    <div class="voiceImg" v-show="musicFlag2">
      <img src="@/assets/images/room/voice_off.png" alt="" v-if="musicFlag">
      <img src="@/assets/images/room/voice_on.png" alt="" v-else>
    </div>
    <!-- 撤单modal -->
    <Modal
      v-model="backOddsDlg"
      class-name=" ctlHeight"
      :closable="false"
      :scrollable="true"
      :mask-closable="false">
      <p slot="header">{{issue}}期-下注清单</p>
        <!-- <Table :columns="columns1" :data="oddsTableData" v-if="oddsTableData.length>0" id="oddsTable"></Table> -->
      <template v-if="oddsTableData.length>0">
        <div class="oddsListTle">
          <div>玩法</div>
          <div>金额</div>
          <div>撤单</div>
        </div>
        <Scroll :on-reach-bottom="handleReachBottom" :distance-to-edge="0" :loading-text="loadingText" class="oddsTbSrl">
          <div v-for="item in oddsTableData" class="oddsListBox">
            <div>{{item.type}}</div>
            <div>{{item.money}}</div>
            <div><img src="@/assets/images/remove.png" alt="" @click="sendBacOnekOdds(item.order_no)"></div>
          </div>
        </Scroll>
      </template>
      <div class="tableNoData" v-else>
        <img src="@/assets/images/tableNoData.png" alt="">
      </div>
      <div slot="footer" class="backOddsFt" v-if="oddsTableData.length>0">
        <div>
          共<span>{{myLotTotalZhu}}</span>注，金额<span>{{myLotTotalMoney}}</span>
        </div>
        <div>
          <Button @click="closeOddsDlg">取消</Button>            
          <Button type="primary" @click="sendBackAllkOdds" :disabled="stopBet||oddsTableData.length<1">全部撤单</Button>
        </div>
      </div>
    </Modal>
    <!-- 单注撤单modal -->    
    <Modal
      v-model="oneBackOddsDlg"
      class-name=" ctlHeight"
      :closable="false"
      :scrollable="true"
      :mask-closable="false">
      <p slot="header">{{issue}}期-下注清单</p>
      <Table :columns="columns1" :data="oneOddsTableData"></Table>
      <div slot="footer" class="modalFooter">
        <div>本期已下<span>{{myLotTotalZhu}}</span>注，共<span>{{myLotTotalMoney}}</span>元宝<s></s></div>
        <Button @click="closeOddsDlg">取消</Button>            
        <!-- <Button type="primary" @click="sendOneBackAllkOdds" :disabled="stopBet||oneOddsTableData.length<1">全部撤单</Button> -->
      </div>
    </Modal>
    <!-- 跟投modal -->
    <Modal
      v-model="followOddsDlg"
      class-name=" ctlHeight"
      :closable="false"
      :scrollable="true"
      :mask-closable="false">
      <!-- <p slot="header" class="gtHeader"><span>跟投玩家<span>{{followTableData.nickname}}</span></span></p> -->
      <p slot="header" class="gtHeader"><span>跟投玩家<span>{{followTableData.nickname}}</span></span><button v-if="uid!=followTableData.uid&&!isTourist" @click="setFollow">{{followStatus==0?'取消关注':'关注'}}</button></p>
      <Table :columns="columns2" :data="followTableData.list"></Table>
      <div slot="footer">
          <p class="tableTip">共<span>{{followTableData.totalZhu}}</span>注，金额<span>{{followTableData.totalMoney}}</span><s></s></p>
          <Button @click="closeOddsDlg">取消</Button>            
          <Button type="primary" @click="sendFollowOdds">确定跟投</Button>
      </div>
    </Modal>
    <!-- lhc跟投modal -->
    <Modal
      v-model="showLhcGtModal"
      class-name=" ctlHeight"
      :closable="false"
      :scrollable="true"
      @on-ok="sendLhcGt"
      @on-cancel="closeGtDlg"
      :mask-closable="false">
      <div class="lgTitle vux-1px-b" slot="header">修改投注金额</div>
      <div class="lgPanel">
        <div class="vux-1px-b">
          <div>玩法内容：</div>
          <div>{{lhcGtData.way}}</div>
        </div>
        <div class="vux-1px-b">
          <div>单注金额：</div>
          <div><InputNumber :min="0" v-model="lhcGtData.single_money"/>元宝×<span>{{lhcGtData.totalZhu}}</span>注</div>
        </div>
        <div class="vux-1px-b">
          <div>总计金额：</div>
          <div><span>{{lhcGtData.totalMoney}}</span>元宝</div>
        </div>
      </div>
    </Modal>
    <!-- 再搏一次modal -->
    <Modal
      v-if="zbycTableData.length>0"
      v-model="zbycOddsDlg"
      class-name=" ctlHeight"
      :closable="false"
      :scrollable="true"      
      :mask-closable="false">
      <p slot="header">{{issue}}期-下注清单</p>
      <Table :columns="columns4" :data="zbycTableData" v-if="zbycTableData.length>0"></Table>
      <div slot="footer">
          <p class="tableTip">共<span>{{zbycTableData[0].zushu}}</span>注，金额<span>{{plagMoney}}</span><s></s></p>
          <Button @click="closeOddsDlg">取消</Button>            
          <Button type="primary" @click="sendPlayAgainOdds">确定</Button>
      </div>
    </Modal>
    <!-- 追号modal -->
    <Modal
      v-model="zhOddsDlg"
      class-name=" ctlHeight"
      title="我的追号"
      class="zhModal"
      :scrollable="true"      
      :mask-closable="false">
      <template v-if="zhTableData.length>0">
        <template v-for="item in zhTableData">
          <div class="zhTableTitle">玩法：<span class="way">{{item.way}}</span><span class="time">{{item.time}}</span><Button type="ghost" size="small" class="cdBtn" @click="sendBacOnekOdds(item.number)">撤单</Button></div>
          <Table :columns="columns3" :data="item.list" class="zhTable"></Table>
        </template>
      </template>
      <div class="tableNoData" v-else>
        <img src="@/assets/images/tableNoData.png" alt="">
      </div>
      <div slot="footer">
          <Button @click="setZhOddsDlg(false)" type="primary">确定</Button>            
      </div>
    </Modal>
    <div v-if="!musicFlag">
      <audio :src="imgRequest+'/'+jfjMusic" autoplay></audio>
      <audio :src="imgRequest+'/'+kpMusic" autoplay v-if="playKpMusic"></audio>
      <audio :src="imgRequest+'/'+fpMusic" autoplay v-if="playFpMusic"></audio>
    </div>
    <div class="choosetoplayright">
      <div class="pcPanel">
        <div class="zjPcBox" :class="`pcBoxIndex${index+1}`" v-for="(item,index) in pcMessage" v-if="pcMessage.length>0">
          <img src="@/assets/images/piao1.png" alt="" v-if="item.name=='一鸣惊人'">
          <img src="@/assets/images/piao2.png" alt="" v-if="item.name=='大显身手'">
          <img src="@/assets/images/piao3.png" alt="" v-if="item.name=='手气逆天'">
          <div class="pcContent">
            <img :src="imgRequest+item.avatar" alt="">
            <div><span class="pcName">{{item.nickname}}</span>，在{{item.lottery_name}}，投注玩法{{item.way}}赢得<span class="pcMoney">{{item.money}}</span>元宝</div>
          </div>
        </div>
      </div>
      <div class="chatcontent" id="chatcontent">
          <div class="chat" id="chat">
              <ul>
                  <template v-for="(item,index) in getMessage">
                    <template  v-if="item.commandid==3061">
                      <div class="zjphPanel">
                        <div>
                          <p>第{{item.issue}}期中奖排行榜</p>
                          <div class="zjphItem zjphItem1">
                            <span>昵称</span>
                            <span>投注</span>
                            <span>中奖</span>
                            <span></span>
                          </div>
                          <div class="zjphItem" v-for="(item1,index) in item.data">
                            <span>{{item1.nickname}}</span>
                            <span>{{item1.bet_total}}</span>
                            <span>{{item1.award_total}}</span>
                            <span>
                              <div v-if="uid!=item1.user_id&&!isTourist" class="zjphBtn" @click="setPhFollow(item1)">{{followObj[item1.user_id]==true?'已关注':'关注'}}</div>
                            </span>
                          </div>
                        </div>
                      </div>
                    </template>
                    <template  v-if="item.commandid===3018" v-for="(item2,index) in item.data">                    
                      <li  class="usermsg rightMsgBox" v-if="item2.uid==uid">
                        <!-- 用户投注记录 -->
                        <div>
                          <p>{{userInfo.nickname}}
                              <em :class="`levelImg${userInfo.honor.sort}`"></em>
                          </p>
                          <table>
                            <div class="allBackStyle" v-show="showAllBackStyle([item2.order_no])">
                              <img src="@/assets/images/allBack.png" alt="">
                            </div>
                            <thead>
                                <tr>
                                    <th>期号</th>
                                    <th>玩法</th>
                                    <th>金额</th>
                                </tr>
                            </thead>
                            <tbody>
                              <tr style="background:#fcfcf1;" :class="{isBackOdd:showBackStyle(item2.order_no)}">
                                  <td>{{item2.issue}}</td>
                                  <td style="color:#F3596A;" class="orderTwoTd">{{item2.way}}</td>
                                  <td style="color:#F3596A">
                                      <span>{{item2.money}}</span>
                                      <s></s>
                                  </td>
                              </tr>
                              <tr>
                                  <td colspan="2">
                                      <div class="total">共
                                          <span>{{item2.zushu}}</span>&nbsp;注，金额
                                          <span>{{item2.money}}</span>
                                          <s></s>
                                      </div>
                                  </td>
                                  <td>
                                      <Button class="followbet"  @click="followOdds(item2)" :disabled="stopBet">跟投</Button>
                                      <Button class="followbet" @click="backOneOdds(item2)"  :disabled="stopBet||issue!=item2.issue">撤单</Button>                                      
                                  </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                        <!-- <img :src="imgRequest+userInfo.avatar" alt="" width="50px" height="50px"> -->
                        <img v-if="userInfo.avatar" @error="emptyAvatarUrl" :src="imgRequest + userInfo.avatar" width="50px" height="50px" alt="">
                        <img v-else src="@/assets/images/head_default.png" width="50px" height="50px">
                      </li>
                      </template>
                      <template v-if="item.commandid===3004">
                          <!-- 系统提示的信息 -->
                          <li class="systemmsg" v-if="item.nickname===''">
                              <template v-if="!item.username">
                                  <pre>{{item.content}}</pre>
                              </template>
                              <template v-else>
                                  <template v-if="item.uid==uid">
                                      <pre>欢迎<span v-bind:class="`levelGif${item.sort}`" class="levelImg"></span>{{item.username}}，进入房间</pre>
                                  </template>
                                  <template v-else-if="item.uid!==uid">
                                      <pre>欢迎<span v-bind:class="`levelGif${item.sort}`" class="levelImg"></span>{{item.username}}，进入房间</pre>
                                  </template>
                              </template>
                          </li>
                          <!-- 右边用户聊天信息 -->                            
                          <li class="usermsg" v-else-if="item.uid==uid">
                              <div>
                                  <p>{{item.nickname}}
                                      <em :class="`levelImg${item.sort}`"></em>
                                  </p>
                                  <p class="word">
                                      {{item.content}}
                                  </p>
                              </div>
                              <!-- <img :src="imgRequest+userInfo.avatar" alt="" width="50px" height="50px"> -->
                              <img v-if="userInfo.avatar" @error="emptyAvatarUrl" :src="imgRequest + userInfo.avatar" width="50px" height="50px" alt="">
                              <img v-else src="@/assets/images/head_default.png" width="50px" height="50px">
                          </li>
                          <li class="robotmsg" v-else>
                              <img :src="imgRequest+item.avatar" alt="" width="50px" height="50px">
                              <div>
                                  <p>{{item.nickname}}
                                      <em :class="`levelImg${item.sort}`"></em>
                                  </p>
                                  <p class="word">
                                      {{item.content}}
                                  </p>
                              </div>
                          </li>
                      </template>
                      <template v-else-if="item.commandid===3022">
                        <li class="systemmsg">
                          <pre>{{item.content}}</pre>
                        </li>
                      </template>
                      <template v-else-if="item.commandid===3007 || item.commandid===30007 || item.commandid===3019">
                          <!-- 右边用户投注信息 -->
                          <template v-if="item.uid==uid&&item.commandid===30007&&item.isHttp">
                            <div class="timeBox"><span>{{item.time}}</span></div>
                            <li class="usermsg rightMsgBox">
                                <div>
                                    <p>{{userInfo.nickname}}
                                        <em :class="`levelImg${userInfo.honor.sort}`"></em>
                                    </p>
                                    <table>
                                      <div class="allBackStyle" v-show="showAllBackStyle(item.order_no)">
                                        <img src="@/assets/images/allBack.png" alt="">
                                      </div>
                                      <div v-show="item.isLoading" class="isLoadMsg"></div>
                                      <thead>
                                          <tr>
                                              <th>期号</th>
                                              <th>玩法</th>
                                              <th>金额</th>
                                          </tr>
                                      </thead>
                                      <tbody>
                                          <tr v-for="(item2,index) in item.way" style="background:#fcfcf1;" :class="{isBackOdd:showBackStyle(item.order_no[index])}">
                                              <td>{{item.issue}}</td>
                                              <td style="color:#F3596A;" class="orderTwoTd">{{item2}}</td>
                                              <td style="color:#F3596A">
                                                  <span>{{item.money[index]}}</span>
                                                  <s></s>
                                              </td>
                                          </tr>
                                          <tr>
                                              <td colspan="2">
                                                  <div class="total">共
                                                      <span>{{item.total_zushu}}</span>&nbsp;注，金额
                                                      <span>{{item.total_money}}</span>
                                                      <s></s>
                                                  </div>
                                              </td>
                                              <td>
                                                <Button class="followbet"  @click="followOdds(item)" :disabled="stopBet">跟投</Button>                                                
                                                <Button class="followbet" @click="backOneOdds(item)" :disabled="stopBet||issue!=item.issue">撤单</Button>
                                              </td>
                                          </tr>
                                      </tbody>
                                    </table>
                                    <p v-if="item.isLoading&&!item.loadingFailed" class="betStatusTip">投注确认中...</p>
                                    <p v-else-if="item.isLoading" class="betStatusTip" @click="showFailedText(item.failedText)">投注失败，点击查看详情</p>
                                </div>
                                <!-- <img :src="imgRequest+userInfo.avatar" alt="" width="50px" height="50px"> -->
                                <img v-if="userInfo.avatar" @error="emptyAvatarUrl" :src="imgRequest + userInfo.avatar" width="50px" height="50px" alt="">
                                <img v-else src="@/assets/images/head_default.png" width="50px" height="50px">
                            </li>
                          </template>
                          <!-- 用户追号信息 -->
                          <template v-else-if="item.commandid===3019">
                            <div class="timeBox"><span>{{item.time}}</span></div>
                            <li  class="usermsg zhmsg rightMsgBox">
                              <div>
                                <p>{{userInfo.nickname}}
                                  <em :class="`levelImg${userInfo.honor.sort}`"></em>
                                </p>
                                <table>
                                  <thead>
                                      <tr>
                                          <th>期号</th>
                                          <th>玩法</th>
                                          <th>金额</th>
                                      </tr>
                                  </thead>
                                  <tbody>
                                      <tr v-for="(item2,index) in item.data.bet_array" style="background:#fcfcf1;">
                                          <td>{{parseInt(item.data.begin_issue)+index}}</td>
                                          <td style="color:#F3596A">{{item2.way}}</td>
                                          <td style="color:#F3596A">
                                              <span>{{item2.money}}</span>
                                              <s></s>
                                          </td>
                                      </tr>
                                      <tr>
                                        <td colspan="3">
                                          <p class="zhInfo">共
                                            <span>{{item.data.bet_array.length}}</span>&nbsp;注，金额
                                            <span>{{item.data.total_amount}}</span>
                                            <s></s>
                                          </p>
                                        </td>
                                      </tr>
                                  </tbody>
                                </table>
                              </div>
                              <!-- <img :src="imgRequest+userInfo.avatar" alt="" width="50px" height="50px"> -->
                              <img v-if="userInfo.avatar" @error="emptyAvatarUrl" :src="imgRequest + userInfo.avatar" width="50px" height="50px" alt="">
                              <img v-else src="@/assets/images/head_default.png" width="50px" height="50px">
                            </li>
                          </template>
                          <div v-else-if="item.uid!=uid&&!item.isHttp">
                            <div class="timeBox"><span>{{item.time}}</span></div>
                            <li class="robotmsg leftMsgBox">
                              <!-- 左边机器人投注记录 -->                           
                              <img :src="imgRequest+item.avatar" alt="" width="50px" height="50px">
                              <div>
                                  <p>{{item.nickname}}
                                      <em :class="`levelImg${item.sort}`"></em>
                                  </p>
                                  <table>
                                      <thead>
                                          <tr>
                                              <th>期号</th>
                                              <th>玩法</th>
                                              <th>金额</th>
                                          </tr>
                                      </thead>
                                      <tbody>
                                          <tr v-for="(item1,index) in item.way">
                                              <td>{{item.issue}}</td>
                                              <td style="color:#F3596A" class="orderTwoTd">{{item1}}</td>
                                              <td style="color:#F3596A">
                                                  <span>{{item.money[index]}}</span>
                                                  <s></s>
                                              </td>
                                          </tr>
                                          <tr>
                                              <td colspan="2">
                                                  <div class="total">共
                                                      <span>1</span>&nbsp;注，金额
                                                      <span>{{item.total_money}}</span>
                                                      <s></s>
                                                  </div>
                                              </td>
                                              <td>
                                                  <Button class="followbet" @click="followOdds(item)" :disabled="stopBet">跟投</Button>
                                              </td>
                                          </tr>
                                      </tbody>
                                  </table>
                              </div>
                            </li>
                          </div>
                          
                      </template>
                      
                      <template v-else-if="item.commandid===3005 || item.commandid===3015">
                        <!-- 系统提示的信息 -->
                        <li class="systemmsg">
                          <pre>{{item.content}}</pre>
                        </li>
                      </template>
                      <template v-else-if="item.commandid===3011 && !showMiPai">
                        <!-- 开奖结果 -->
                        <li class="systemmsg kjkgPanel">
                          <pre><p style="color:#2aabee;">期号：{{item.issue}}</p>开奖时间：{{item.open_time}}<br>开奖结果：{{item.result}}<span v-show="item.sum_result_str">{{'（'+item.sum_result_str+'）'}}</span><br><span v-show="item.statistics">统计：{{item.statistics}}</span></pre>
                        </li>
                      </template>
                      <template v-else-if="item.commandid===3888&&item.greet">
                        <!-- 房间提示 -->
                        <li class="systemmsg">
                          <pre class="greet">{{item.greet}}</pre>
                        </li>
                      </template>
                  </template>
              </ul>
          </div>
      </div>
        <div class="flListPanel" id="flListPanel" v-show="showFlList">
          <Scroll :on-reach-bottom="getFollowList" :distance-to-edge="0" :loading-text="flLoadingText">
          <div class="flTitle vux-1px-b">
            最多可关注100个会员
            <img src="@/assets/images/room/login_close_icon@2x.png" alt="" @click="showFlList=false">
          </div>
          <div class="noDataP" v-if="followList.length<1">
            <img src="@/assets/images/tableNoData.png" />
          </div>
          <div class="flBox" v-for="(item,index) in followList" :key="index" @click="showFlItem(item.id)">
            <div class="flBoxTlt">
              <div>
                <img :src="imgRequest+item.avatar" alt="" v-if="item.avatar">
                <img src="@/assets/images/head_default.png" alt="" v-else>
                {{item.nickname}}
                <span class="levelImg" :class="`levelImg${item.honor_upgrade}`"></span>
              </div>
              <Icon type="ios-arrow-forward" size="20"/>
            </div>
            <div v-if="followItemInfo.id==item.id" class="followItem">
              <p>
                <span>
                  <img src="@/assets/images/room/focus_list_icon@2x.png"/>近五笔投注记录
                </span>
                <button class="qxgzBtn vux-1px" @click="qxFollow(item.id,item.nickname)">取消关注</button>
              </p>
              <table class="flTable" v-if="followItemData.length>0">
                <tr>
                  <th>彩种房间</th>
                  <th>期号</th>
                  <th>投注内容</th>
                  <th>金额</th>
                  <th>跟投</th>
                </tr>
                <tr v-for="(item1,index1) in followItemData" :key="index1">
                  <td>{{item1.lottery_name+'  '+(item1.room_name?item1.room_name:'')}}</td>
                  <td>{{item1.issue}}</td>
                  <td>{{item1.way}}</td>
                  <td>{{item1.money}}</td>
                  <td><button class="flGtBtn" @click="myFollowOdds(item1)">跟投</button></td>
                </tr>
              </table>
              <div v-else class="noDataP">
                <img src="@/assets/images/tableNoData.png" />
              </div>
            </div>
          </div>
        </Scroll>
      </div>
      <!-- 本期投注，我的追号，声音关闭 -->
      <div class="wenlu" @click="setAskRoad()">
          <span></span>
          <p>问路</p>
      </div>
      <div class="mipaibet" @click="mipai()">
          <span></span>
          <p>咪牌</p>
      </div>
      <div class="thisbet" @click="backOdds()">
          <span></span>
          <p>本期投注</p>
      </div>
      <div class="mybet" @click="setZhOddsDlg(true)">
          <span></span>
          <p>我的追号</p>
      </div>
      <div class="myFollow" @click="getFollowList(true)">
          <img src="../../../assets/images/room/gzIcon.png">
          <p> 我的关注 </p>
      </div>
      <div class="closevoice" @click="closeMusic">
          <img src="../../../assets/images/voice.png" v-if="musicFlag">
          <img src="../../../assets/images/voice2.png" v-else>
          <p> 声音关闭 </p>
      </div>
    </div>
    <!-- 底部用户编辑聊天信息的区域 -->
    <div class="sendmsg" :class="{'absBox': bindAbsClass}" id="sendmsg">
      <Input class="inp" v-model="userMessage" @on-keyup.13="sendMessage()" placeholder="请逼格高的发言"/>
      <Button type="primary" class="sendbtn" @click="sendMessage()">发送</Button>
      <div class="goBottom" @click="goBottom" v-show="!inBottom"><img src="@/assets/images/goBottom.png" alt=""></div>
      <!-- 再搏一次 -->
      <div class="playAgain" v-show="playAgainFlag&&!showMiPai">
        <div class="plagSlide">
          <div class="paText">
            <img src="@/assets/images/jiayou.png" alt="">
            您上期投注的 [{{plagWay}}] 离中奖只差一点点了~ <span @click="zbycOddsDlg=!zbycOddsDlg">再搏一次（<span>{{plagMoney}}<s></s></span>）</span>
          </div>
          <img src="@/assets/images/close1.png" alt="" @click="playAgainFlag=!playAgainFlag">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { websock, websocketsend } from "@/common/js/websocket";
import removeImg from '@/assets/images/remove.png';
import ybImg from '@/assets/images/ybImg.png';
import {fetchJson} from "@/common/js/request";
import { mapGetters, mapActions } from "vuex";
import { timeFormat } from "@/assets/js/dom"
import _ from 'lodash';
export default {
  props: ["allMessages","musicList","bindAbsClass"],
  data() {
    return {
      followObj: {},
      lhcGtData: {},
      userName: JSON.parse(localStorage.getItem("userData")).nickname,
      uid: JSON.parse(localStorage.getItem("userData")).uid,
      avatar: JSON.parse(localStorage.getItem("userData")).avatar,
      sort: JSON.parse(localStorage.getItem("userData")).honor.sort,
      showFlList: false,
      followList: [],
      musicFlag: false,//是否关闭声音
      musicFlag2: false,
      getMessage: ["aaaaa"],
      issue: '',
      userMessage: "",
      pcMessage:[],//中奖飘窗数据
      data318:{},//3018返回的数据
      backOddsDlg: false,//撤单modal
      followOddsDlg: false,//跟投modal
      oneBackOddsDlg: false,//单面板撤单modal
      zhOddsDlg: false,//追号modal
      playAgainFlag:false,//再搏一次
      plagWay:'',
      plagMoney:0,
      followTableData: {//跟投data
        list:[],
        issue:'',
        nickname:'',
        totalMoney:0,
        totalZhu:0,
      },
      disBackOdds: false,
      myLotList:[],//自己的投注记录
      oddsIndex:'',//注单下标
      hasBackOdds:[],//已经撤单的订单号
      columns1: [
        //投注表格内容自定义
        {
          title: "玩法",
          key: "type",
          align: "center"
        },
        {
          title: "金额",
          key: "money",
          align: "center",
          render: (h,params)=>{
           return h('div',[
            h('span', {
            },params.row.money),
            h('img', {
              attrs:{
                src:ybImg
              },
              style:{'margin':'0px 4px'},
            })
           ]) 
          }
        },
        {
          title: "撤单",
          key: "remove",
          align: "center",
          render: (h, params) => {
            return h("img", {
              attrs: {
                src: removeImg
              },
              style: { cursor: "pointer", "vertical-align": "middle" },
              on: {
                click: () => {
                  if(_.isArray(params.row.order_no)){
                    this.sendBacOnekOdds(params.row.order_no[params.index]);                    
                  }else{
                    this.sendBacOnekOdds(params.row.order_no);
                  }
                  this.oddsIndex=params.index;
                }
              }
            });
          }
        }
      ],
      isLhc: false,
      showLhcGtModal: false,
      columns2: [
        //投注表格内容自定义
        {
          title: "期号",
          key: "issue",
          align: "center"
        },
        {
          title: "内容",
          key: "way",
          align: "center"
        },
        {
          title: "金额",
          key: "money",
          align: "center",
          render: (h,params)=>{
            if(this.isLhc){
              return h('div', {
                props: {
                  class: 'lhcIpt'
                },
                style: {border: '1px solid #ccc',borderRadius: '4px',padding: '4px', width: '40px', margin: '0 auto', cursor: 'pointer'},
                on: {
                  click: () => {
                    this.lhcGtData={
                      way: this.followTableData.way[params.index],
                      totalMoney: this.followTableData.money[params.index],
                      totalZhu: this.followTableData.money[params.index]/this.followTableData.single_money[params.index],
                      single_money: this.followTableData.single_money[params.index],
                      index: params.index
                    }
                    this.showLhcGtModal=true
                  }
                }
              },this.followTableData.money[params.index])
            }
            return h('div',[
              h("InputNumber", {
                props: {
                  value: parseInt(this.followTableData.money[params.index]),
                  formatter: value => `${Math.round(value)}`,
                  parser: value => `${Math.round(value)}`,
                  max: 10000,
                  min: 1
                },
                style: { width: "80px", textAlign: "center" },
                on: {
                  input: e => {
                    console.log(e, 'params')
                    e = Math.round(e)
                    for (var i = 0; i < this.followTableData.money.length; i++) {
                      if(params.index==i){
                        this.followTableData.money[i]=e
                        var count=0
                        for(var i=0;i<this.followTableData.money.length;i++){
                          count+=this.followTableData.money[i]
                        }
                        console.log(this.followTableData, 'this.followTableData')
                        this.followTableData.totalMoney=count
                      }
                    }
                  }
                }
              }),
              h('img', {
                attrs:{
                  src:ybImg
                },
                style:{'margin':'0px 4px'},
              })
            ])
          }
      }],
      columns4: [
        //投注表格内容自定义
        {
          title: "期号",
          key: "issue",
          align: "center"
        },
        {
          title: "内容",
          key: "way",
          align: "center"
        },
        {
          title: "金额",
          key: "money",
          align: "center",
          render: (h,params)=>{
            return h('div',[
              h("InputNumber", {
                props: {
                  value: parseInt(this.zbycTableData[0].money),
                  formatter: value => `${Math.round(value)}`,
                  parser: value => `${Math.round(value)}`,
                  max: 10000,
                  min: 1
                },
                style: { width: "80px", textAlign: "center" },
                on: {
                  input: e => {
                    console.log(e, 'params')
                    e = Math.round(e)
                    this.zbycTableData[0].money=e
                    this.zbycTableData[0].totalMoney=e
                    this.plagMoney=e
                  }
                }
              }),
              h('img', {
                attrs:{
                  src:ybImg
                },
                style:{'margin':'0px 4px'},
              })
            ])
          }
      }],
      columns3: [
        {
          title: "期号",
          key: "issue",
          align: "center"
        },
        {
          title: "金额",
          key: "money",
          align: "center",
          render: (h,params)=>{
            return h('div',[
              h('span', {
              },params.row.money),
              h('img', {
                attrs:{
                  src:ybImg
                },
                style:{'margin':'0px 4px'},
              })
            ])
          }
        },
        {
          title: "倍数",
          key: "multiple",
          align: "center",
        },
        {
          title: "状态",
          key: "status",
          align: "center",
          render: (h,params)=>{
            var status = params.row.status;
            var color;
            switch (status) {
              case '待开奖':
                color='#495060'
                break;
              case '未中奖':
                color='#C82834'
                break;
              case '已中奖':
                color='#F3596A'
                break;
              default:
                color='#495060'
                break;
            }
            return h('span',{
              style:{color:color},
            },params.row.status)
          }
        }
      ],
      oddsTableData: [],
      zhTableData: [],
      oneOddsTableData: [],
      inBottom: true,//聊天室是否在底部
      jfjMusic:'',//进房间music
      kpMusic:'',//开盘music
      fpMusic:'',//封盘music  
      playFpMusic:false,
      playKpMusic:false,
      zbycOddsDlg:false,
      zbycTableData:[],
      loadingText:'加载中',
      flLoadingText: '加载中',
      isTourist: true,
      followStatus: 1,
      token: localStorage.getItem('token'),
      myLotTotalMoney: 0,
      myLotTotalZhu: 0,
      followPage: 1,
      followItemInfo: {
        id: -1,
      },
      followItemData: [],
    };
  },
  created() {
  },
  mounted() {
    this.roomScroll();
    if(localStorage.getItem('musicFlag')=="false"||_.isEmpty(localStorage.getItem('musicFlag'))){
      this.musicFlag=false
    }else{
      this.musicFlag=true
    }
    if(this.$route.query.lottery_type==7||this.$route.query.lottery_type==8){
      this.isLhc=true
    }
    if (this.accountData.is_tourist && this.accountData.is_tourist === 1) {
      this.isTourist = true
    }else{
      this.isTourist = false
    }
  },
  computed: {
    ...mapGetters(["stopBet","showMiPai","showAskRoad","userInfo","accountData","newRstData","serTime"])
  },

  methods: {
    showFlItem(id) {
      if(this.followItemInfo.id==id){
        this.followItemInfo.id=-1
        return
      }
      let vm = this
      let params = {}
      params.token = this.token
      params.user_id=id
      params.room_id=this.$route.query.id
      vm.$http.post(vm.urlRequest + '?m=api&c=userfollow&a=followUserBetInfo', params).then(res => {
        if (res.data.status == 0) {
          this.followItemData=res.data.data
          this.followItemInfo=res.data.userData
          this.followItemInfo.id=id
        }else{
          this.$Message.warning('数据请求超时')
        }
      })
    },
    emptyAvatarUrl() { //清空头像路径
      this.userInfo.avatar = ''
    },
    closeGtDlg: function(){
      this.showLhcGtDlg=false
      this.showFollowDlg=true
    },
    showFailedText: function(text){
      if(_.isEmpty(text)){
        text='投注超时，请重新下注'
      }
      this.$Modal.warning({
        content: text
      })
    },
    sendLhcGt: function(){
      this.followTableData.single_money[this.lhcGtData.index]=this.lhcGtData.single_money
      this.followTableData.money[this.lhcGtData.index]=this.lhcGtData.totalMoney
      this.followTableData.list[this.lhcGtData.index].money=this.lhcGtData.totalMoney
      var count=0
      for(var i=0;i<this.followTableData.money.length;i++){
        count+=this.followTableData.money[i]
      }
      this.followTableData.totalMoney=count
      this.closeGtDlg()
    },
    mipai: function() {
      if(this.showMiPai){
        this.$store.commit('setShowMiPai',false)        
      }else{
        this.$store.commit('setShowMiPai',true)
        this.$store.commit('setShowAskRoad',false)
      }
    },
    qxFollow: function(id,name){
      //取消关注
      this.$Modal.confirm({
        content: '<p>您确定要取消关注'+name+'吗？</p>',
        scrollable: true,
        loading: true,
        onOk: () => {
          this.$http.post(this.urlRequest + "?m=api&c=user&a=cancelFollowUser", {user_id:id, token: this.token}).then(res => {
            this.$Message.warning(res.data.ret_msg)
            if(res.data.status==0){
              this.followPage=1
              this.followList=[]
              this.getFollowList()
              this.showFlList=true
            }
            this.$Modal.remove()
          })     
        }
      });
      
    },
    setFollow: function(){
      //设置是否关注
       if(this.followStatus==0){
        this.$http.post(this.urlRequest + "?m=api&c=user&a=cancelFollowUser", {user_id:this.followTableData.uid,token: this.token}).then(res => {
          this.$Message.warning(res.data.ret_msg)
          if(res.data.status==0){
            this.followStatus=1
          }
        })
       }else{
         this.$http.post(this.urlRequest + "?m=api&c=user&a=addFollowUser", {user_id:this.followTableData.uid,token: this.token}).then(res => {
          this.$Message.warning(res.data.ret_msg)
          if(res.data.status==0){
            this.followStatus=0
          }
        })
       }
    },
    myFollowOdds: function(item){
      item.money=parseInt(item.money)
      const agentData = {
        "token": this.token,
        "commandid":"3006",
        "nickname":this.userInfo.nickname,
        "way":[item.way],
        "money":[item.money],
        "ext_a": 1,
        "single_money":[item.single_money],
        "avatar":this.avatar
      }
      var uniNo = new Date().getTime()+Math.floor(Math.random()*900)+100
      var params = {
        user_id: this.userInfo.id,
        lottery_type: this.$route.query.lottery_type,
        room_id: this.$route.query.id,
        nickname: this.userInfo.nickname,
        money: JSON.stringify([item.money]),
        issue: this.issue,
        way: JSON.stringify([item.way]),
        single_money:JSON.stringify([item.single_money]),
        serTime: this.serTime,
        ext_a: 1,
        uniNo: uniNo,
        token: this.token,
      }
      let lotRstData={
        isHttp: true,
        isLoading: true,
        avatar: this.userInfo.avatar,
        commandid: 30007,
        issue: this.issue,
        money: [item.money],
        single_money: [item.single_money],
        total_money: item.money,
        total_zushu: 1,
        nickname: this.userInfo.nickname,
        time: timeFormat(new Date().getTime()),
        uid: this.userInfo.id,
        uniNo: uniNo,
        sort: this.userInfo.honor.sort,
        serTime: this.serTime,
        order_no: '',
        way: [item.way],
        loadingFailed: false,
        failedText: '',
      }
      this.$store.commit('setLotRstData', lotRstData)
      this.$http.post(this.urlRequest + "?m=api&c=workerman&a=http_betting", params).then(result=>{
        result=result.data
        if(result.commandid!=3007){
          var failedObj = JSON.parse(JSON.stringify(lotRstData))
          failedObj.loadingFailed=true
          failedObj.failedText=result.content
          this.$store.commit('setNewRstData', failedObj)
          return
        }
        var accountData = this.accountData
        accountData.money_usable=result.current_money
        this.$store.commit('setAccountData', accountData)
        this.$store.commit('setNewRstData', result)
      },
      err=>{
        lotRstData.loadingFailed=true
        lotRstData.failedText='投注超时，请重新下注'
        this.$store.commit('setNewRstData', lotRstData)
      })
      // websocketsend(agentData) 
      this.showFlList=false
      this.showFollowItem=false
      
    },
    getFollowList: function(flag){
      //获取我的关注列表
      if(this.followPage>10){
        this.flLoadingText='没有更多了'
        return
      }
      if(!this.showFlList){
        this.showFlList=true
      }else if(this.showFlList&&flag){
        this.showFlList=false
        return
      }
      if(this.isTourist){
        this.$Message.warning('游客不能关注！')
        return
      }
      let params = {};
      params.token = this.token;
      params.page=this.followPage
      this.$http.post(this.urlRequest + "?m=api&c=userfollow&a=followUserList",params).then(res => {
        this.followList = this.followList.concat(res.data.data)
        this.followPage+=1
      })
      
    },
    setAskRoad: function(){
      if(this.showAskRoad){
        this.$store.commit('setShowAskRoad',false)        
      }else{
        this.$store.commit('setShowAskRoad',true)
        console.log(this.showAskRoad)
        this.$store.commit('setShowMiPai',false)
      }
    },
    handleReachBottom: function(){
      const agentData = {
        "commandid": "3017",
        "uid": JSON.parse(localStorage.getItem("userData")).uid,
        "roomid":this.$route.query.id,
        "lottery_type":this.$route.query.lottery_type,
        "offSet":this.oddsTableData.length
      };
      websocketsend(agentData);
    },
    sendPlayAgainOdds: function(){
      //再搏一次
      const agentData = {
        "token": this.token,
        "commandid":"3006",
        "nickname":JSON.parse(localStorage.getItem("userData")).nickname,
        "way":[this.zbycTableData[0].way],
        "money":[this.zbycTableData[0].money],
        "single_money": this.zbycTableData[0].single_money,
        "avatar":JSON.parse(localStorage.getItem("userData")).avatar
      };
      // websocketsend(agentData); 
      var uniNo = new Date().getTime()+Math.floor(Math.random()*900)+100
      var params = {
        user_id: this.userInfo.id,
        lottery_type: this.$route.query.lottery_type,
        room_id: this.$route.query.id,
        nickname: this.userInfo.nickname,
        money: JSON.stringify([this.zbycTableData[0].money]),
        issue: this.issue,
        way: JSON.stringify([this.zbycTableData[0].way]),
        single_money:JSON.stringify([this.zbycTableData[0].single_money]),
        serTime: this.serTime,
        ext_a: 1,
        uniNo: uniNo,
        token: this.token,
      }
      let lotRstData={
        isHttp: true,
        isLoading: true,
        avatar: this.userInfo.avatar,
        commandid: 30007,
        issue: this.issue,
        money: [this.zbycTableData[0].money],
        single_money: [this.zbycTableData[0].single_money],
        total_money: this.zbycTableData[0].money,
        total_zushu: this.zbycTableData[0].zushu,
        nickname: this.userInfo.nickname,
        time: timeFormat(new Date().getTime()),
        uid: this.userInfo.id,
        uniNo: uniNo,
        sort: this.userInfo.honor.sort,
        serTime: this.serTime,
        order_no: '',
        way: [this.zbycTableData[0].way],
        loadingFailed: false,
        failedText: '',
      }
      this.$store.commit('setLotRstData', lotRstData)
      this.$http.post(this.urlRequest + "?m=api&c=workerman&a=http_betting", params).then(result=>{
        result=result.data
        if(result.commandid!=3007){
          var failedObj = JSON.parse(JSON.stringify(lotRstData))
          failedObj.loadingFailed=true
          failedObj.failedText=result.content
          this.$store.commit('setNewRstData', failedObj)
          return
        }
        var accountData = this.accountData
        accountData.money_usable=result.current_money
        this.$store.commit('setAccountData', accountData)
        this.$store.commit('setNewRstData', result)
      },
      err=>{
        lotRstData.loadingFailed=true
        lotRstData.failedText='投注超时，请重新下注'
        this.$store.commit('setNewRstData', lotRstData)
      })
      this.zbycOddsDlg=false;
      this.playAgainFlag=false;
    },
    closeMusic: function(){
      this.musicFlag2=true
      var that = this
      setTimeout(function(){
        that.musicFlag2=false
      },2000)
      this.musicFlag=!this.musicFlag
      localStorage.setItem('musicFlag',this.musicFlag)
    },
    goBottom: function(){
      //回到底部
      this.inBottom=true
      var scrollDiv = document.getElementById("chatcontent");
      var chat = document.getElementById("chat");
      setTimeout(function() {
        scrollDiv.scrollTop = chat.scrollHeight;
      }, 20);
    },
    sendMessage: function() {
      if(_.isEmpty(this.userMessage)){
        this.$Message.warning('消息不能为空')
        return;
      }
      const agentData = {
        commandid: "3003",
        nickname: JSON.parse(localStorage.getItem("userData")).nickname,
        content: this.userMessage,
        //加了uid参数
        uid: JSON.parse(localStorage.getItem("userData")).uid,
        avatar: JSON.parse(localStorage.getItem("userData")).avatar
      };
      websocketsend(agentData);
      this.userMessage='';
    },
    closeOddsDlg: function() {
      this.backOddsDlg=false;
      this.followOddsDlg=false;
      this.oneBackOddsDlg=false;
      this.zbycOddsDlg=false;
    },
    sendFollowOdds: function(){
      //跟投
      const agentData = {
        "token": this.token,
        "commandid":"3006",
        "nickname":JSON.parse(localStorage.getItem("userData")).nickname,
        "way":this.followTableData.way,
        "money":this.followTableData.money,
        "ext_a": 1,
        "single_money":this.followTableData.single_money,
        "avatar":JSON.parse(localStorage.getItem("userData")).avatar
      };
      var uniNo = new Date().getTime()+Math.floor(Math.random()*900)+100
      var params = {
        user_id: this.userInfo.id,
        lottery_type: this.$route.query.lottery_type,
        room_id: this.$route.query.id,
        nickname: this.userInfo.nickname,
        money: JSON.stringify(this.followTableData.money),
        issue: this.issue,
        way: JSON.stringify(this.followTableData.way),
        single_money:JSON.stringify(this.followTableData.single_money),
        serTime: this.serTime,
        ext_a: 1,
        uniNo: uniNo,
        token: this.token,
      }
      let lotRstData={
        isHttp: true,
        isLoading: true,
        avatar: this.userInfo.avatar,
        commandid: 30007,
        issue: this.issue,
        money: this.followTableData.money,
        single_money: this.followTableData.single_money,
        total_money: this.followTableData.totalMoney,
        total_zushu: this.followTableData.totalZhu,
        nickname: this.userInfo.nickname,
        time: timeFormat(new Date().getTime()),
        uid: this.userInfo.id,
        uniNo: uniNo,
        sort: this.userInfo.honor.sort,
        serTime: this.serTime,
        order_no: '',
        way: this.followTableData.way,
        loadingFailed: false,
        failedText: '',
      }
      this.$store.commit('setLotRstData', lotRstData)
      this.$http.post(this.urlRequest + "?m=api&c=workerman&a=http_betting", params).then(result=>{
        result=result.data
        if(result.commandid!=3007){
          var failedObj = JSON.parse(JSON.stringify(lotRstData))
          failedObj.loadingFailed=true
          failedObj.failedText=result.content
          this.$store.commit('setNewRstData', failedObj)
          return
        }
        var accountData = this.accountData
        accountData.money_usable=result.current_money
        this.$store.commit('setAccountData', accountData)
        this.$store.commit('setNewRstData', result)
      },
      err=>{
        lotRstData.loadingFailed=true
        lotRstData.failedText='投注超时，请重新下注'
        this.$store.commit('setNewRstData', lotRstData)
      })
      // websocketsend(agentData); 
      this.followOddsDlg=false;
    },
    sendBackAllkOdds: function() {
      //全部撤单
      this.$Modal.confirm({
        content: '<p>您确定要撤单吗？</p>',
        scrollable: true,
        loading: true,
        onOk: () => {
          const agentData = {
              "commandid":"3009",
              "lottery_type":this.$route.query.lottery_type,
              "roomid":this.$route.query.id,
              "uid":JSON.parse(localStorage.getItem("userData")).uid,
          };
          websocketsend(agentData);         
        }
      });
    },
    setPhFollow(item) {
      this.$http.post(this.urlRequest + "?m=api&c=user&a=addFollowUser", {user_id:item.user_id,token: this.token}).then(res => {
        this.$Message.success(res.data.ret_msg)
        if(res.data.status==0){
          this.followObj[item.user_id]=true
        }
      })
    },
    sendOneBackAllkOdds: function(){
      // 单个面板全部撤单
      // this.$Modal.confirm({
      //   content: '<p>您确定要撤单吗？</p>',
      //   loading: true,
      //   onOk: () => {
      //     const agentData = {
      //         "commandid":"3009",
      //         "lottery_type":this.$route.query.lottery_type,
      //         "roomid":this.$route.query.id,
      //         "uid":JSON.parse(localStorage.getItem("userData")).uid,
      //     };
      //     websocketsend(agentData);         
      //   }
      // });
    },
    sendBacOnekOdds: function(order_no) {
      //单注撤单
      this.$Modal.confirm({
        content: '<p>您确定要撤单吗？</p>',
        loading: true,
        onOk: () => {
          const agentData = {
            "commandid":"3016",
            "uid":JSON.parse(localStorage.getItem("userData")).uid,
            "order_no": order_no
          };
          websocketsend(agentData);
        }
      });
      
    },
    showBackStyle: function(order_no){//单注撤单style
      var flag = false;
      if(this.hasBackOdds.length>0){
        for(var i=0;i<this.hasBackOdds.length;i++){
          if(this.hasBackOdds[i]==order_no){
            flag=true;
            break;
          }
        }
        return flag;
      }
    },
    showAllBackStyle: function(orderArr){//一组撤单style
      if(!_.isArray(orderArr)){
        orderArr=[orderArr]
      }
      var count = 0;
      for(var j=0;j<orderArr.length;j++){
        for(var i=0;i<this.hasBackOdds.length;i++){
          if(orderArr[j]==this.hasBackOdds[i]){
            count++;
          }
        }
      }
      if(count==orderArr.length){
        return true;
      }else{
        return false;
      }
    },
    backOdds: function() {
      if(this.oddsTableData.length>0){
        this.disBackOdds=false;        
      }
      this.backOddsDlg = true;
    },
    backOneOdds: function(data) {//单个面板点击撤单
      var newArr=[];
      var newData= data;
      if(_.isArray(data.way)){
        for(var i=0;i<data.order_no.length;i++){
          if(this.hasBackOdds.length>0){
            for(var j=0;j<this.hasBackOdds.length;j++){
              if(this.hasBackOdds[j]==data.order_no[i]){
                newData.way.splice(i,1);
                newData.money.splice(i,1);
                newData.order_no.splice(i,1);
              }
            }
          }
        }
        for(var g=0;g<newData.way.length;g++){
          newArr.push({
            type: newData.way[g],
            money: newData.money[g],
            order_no: newData.order_no[g]      
          })
        }
      }else{
        newArr.push({
          type: data.way,
          money: data.money,
          order_no: data.order_no,
        })
      }
      
      this.oneOddsTableData=newArr;
      this.oneBackOddsDlg=true;
    },
    followOdds: function(item){
      item=JSON.parse(JSON.stringify(item))
      if(item.isLoading){
        return
      }
      var newArr=[];
      if(_.isArray(item.way)){
        for(var i=0;i<item.way.length;i++){
          newArr.push({
            issue: item.issue,
            way: item.way[i],
            money: item.money[i],
          });
        }
      }else{
        newArr.push({
          issue: item.issue,
          way: item.way,
          money: item.money,
        });
      }
      this.followTableData.list=newArr;
      this.followTableData.issue=item.issue;
      this.followTableData.nickname=item.uid==this.uid?this.userInfo.nickname:item.nickname;
      this.followTableData.totalMoney=item.total_money||item.money;
      this.followTableData.totalZhu=item.total_zushu||item.zushu;
      this.followTableData.way=_.isArray(item.way) ? item.way: [item.way];      
      this.followTableData.money=_.isArray(item.money) ? item.money: [item.money];
      this.followTableData.uid=item.uid
      if(this.$route.query.lottery_type==7||this.$route.query.lottery_type==8){
        //六合彩要传single_money
        this.followTableData.single_money=_.isArray(item.single_money) ? item.single_money: [item.single_money];
      }
      this.$http.post(this.urlRequest + "?m=api&c=user&a=checkFollowUser", {user_id:this.followTableData.uid, token: this.token}).then(res => {
        this.followStatus=res.data.code
        console.log(this.followStatus,'followStatus')
      })
      this.followOddsDlg = true;
    },
    setZhOddsDlg: function(flag){//打开追号注单面板
      if(flag){
        fetchJson(this, "?m=api&c=order&a=getZhuiHaoInfo", {
          room_id:this.$route.query.id,
          }).then(result => {
            if(result.list.length>0){
              var newTableData = [];
              for(var i=0;i<result.list.length;i++){
                var newArr = [];
                for(var j=0;j<result.list[i].data.length;j++){
                  var data = result.list[i].data[j];
                  if(data.award_state==0){
                    data.award_state='待开奖';
                  }else if(data.award_state==1){
                    data.award_state='未中奖';
                  }else if(data.award_state==2){
                    data.award_state='已中奖';           
                  }
                  newArr.push({
                    issue:data.issue,
                    money:parseInt(data.money),
                    multiple:data.multiple,
                    status:data.award_state
                  });
                }
                newTableData.push({way:result.list[i].way,time:result.list[i].time,number:result.list[i].number,list:newArr});
              }
              this.zhTableData=newTableData;
            }
        });
      }
      this.zhOddsDlg=flag;
    },
    roomScroll: function(){//聊天室滚屏方法
      var that = this;
      var scrollDiv = document.getElementById("chatcontent");
      var chat = document.getElementById("chat");
      scrollDiv.onscroll = function(){
        if(scrollDiv.scrollTop+scrollDiv.clientHeight==scrollDiv.scrollHeight){
          //滚到底部
          that.inBottom=true;
        }else{
          that.inBottom=false;
        }
      }
    },
    
  },
  components: {},
  watch: {
    issue: {
      handler(newVal, oldVal){
        //本期结束
        if(newVal!=oldVal){
          this.zhTableData=[]
          this.myLotList=[];
          this.oddsTableData=[];
          this.hasBackOdds=[];
          this.playAgainFlag = false
          this.myLotTotalZhu=0
        }
      },
      deep: true
    },
    serTime: function(newVal){
      newVal=JSON.parse(JSON.stringify(newVal))
      for(var i=0;i<this.getMessage.length;i++){
        if(this.getMessage[i].commandid==30007&&this.getMessage[i].isLoading){
          if(newVal-this.getMessage[i].serTime>10){
            this.getMessage[i].failedText='投注超时，请重新下注'
            this.getMessage[i].loadingFailed=true
            break
          }
        }
      }
    },
    newRstData: function(newVal){
      newVal=JSON.parse(JSON.stringify(newVal))
      for(var i=0;i<this.getMessage.length;i++){
        if(this.getMessage[i].uniNo==newVal.uniNo){
          if(newVal.loadingFailed){
            this.getMessage[i].failedText=newVal.failedText
            this.getMessage[i].loadingFailed=true
            return false
          }
          this.getMessage[i].isLoading=false
          this.getMessage[i].order_no=newVal.order_no
          this.getMessage[i].total_zushu=newVal.total_zushu
          //把自己的投注记录存起来
          var newArr=[]
          this.totalZu=parseInt(this.totalZu)+newVal.total_zushu
          if(_.isArray(newVal.way)){
            for(var j=0;j<newVal.way.length;j++){
              newArr.push({
                type: newVal.way[j],
                money: newVal.money[j],
                order_no: newVal.order_no[j],
              })
            }
          }else{
            newArr.push({
              type: newVal.way[0],
              money: newVal.money[0],
              order_no: '123456',
            });
          }
          // this.myLotList=this.myLotList.concat(newArr)
          this.myLotList=newVal
          console.log(this.getMessage[i], 'this.getMessage[i]')
          break
        }
      }
    },
    allMessages: {
      handler(oldVal, newVal) {
        oldVal=JSON.parse(JSON.stringify(oldVal))
        if(oldVal.commandid===3001){
          //倒计时
          this.issue=oldVal.issue;
          if(oldVal.issue!=newVal.issue&&newVal.issue!=undefined){
            this.playKpMusic=true
            var that = this
            setTimeout(function(){
              that.playKpMusic=false
            },5000)
          }
        }else if(oldVal.commandid===30007&&oldVal.uid==this.uid){
          //把自己的投注记录存起来
          // this.myLotList=oldVal;
        }else if(oldVal.commandid===3011){
          
        }else if(oldVal.commandid===3015){
          if(_.isEmpty(oldVal.order_no)){
            //全部撤单
            this.hasBackOdds = this.hasBackOdds.concat(oldVal.order_list);            
            this.myLotList=[];
            this.oddsTableData=[];
          }else{
            //单注撤单
            for(var i=0;i<this.oddsTableData.length;i++){
              if(this.oddsTableData[i].order_no==oldVal.order_no){
                this.oddsTableData.splice(i,1);       
                break;      
              }
            }
            for(var i=0;i<this.oneOddsTableData.length;i++){
              if(this.oneOddsTableData[i].order_no==oldVal.order_no){
                this.oneOddsTableData.splice(i,1);                        
                break;      
              }
            }
            this.hasBackOdds.push(oldVal.order_no);
          }
          if(this.oddsTableData.length<1){
            this.backOddsDlg=false;
            
          }
          if(this.oneOddsTableData.length<1){
            this.oneBackOddsDlg=false;
          }
        }else if(oldVal.commandid==3019){
          //追号成功
        }else if(oldVal.commandid==3022){
          var order_no = oldVal.order_no;
          for(var i=0;i<this.zhTableData.length;i++){
            if(this.zhTableData[i].number==order_no){
              this.zhTableData.splice(i,1);
              break;
            }
          }
        }else if(oldVal.commandid==3018){
          //自己的投注信息
          if(_.isEmpty(oldVal.data)){
            this.loadingText='没有更多了'
            return;
          }
          this.data318=oldVal;
        }else if(oldVal.commandid==3023){
          //中奖飘窗
          if(_.isEmpty(oldVal.data)){
            return;
          }
          if(this.pcMessage.length<1){
              this.pcMessage.push(oldVal.data)
          }
        }else if(oldVal.commandid==3025){
          //再搏一次
          this.plagWay=oldVal.way
          this.plagMoney=parseInt(oldVal.money)
          this.zbycTableData[0]={
            issue: this.issue,
            way: this.plagWay,
            money: this.plagMoney,
            zushu: oldVal.zushu,
            single_money: oldVal.single_money,
          }
          this.playAgainFlag=true
        }
        if(oldVal.commandid!=3023){
          this.getMessage.push(oldVal);
        }
        if(this.getMessage.length==500){
          //500条清空数据
          this.getMessage=[]
        }
        
        
        if(this.inBottom==true){
          var scrollDiv = document.getElementById("chatcontent");
          var chat = document.getElementById("chat");
          setTimeout(function() {
            scrollDiv.scrollTop = chat.scrollHeight;
          }, 20);
        }
      },
      deep: true
    },
    myLotList: {
      handler(oldVal, newVal){
        let newArr = [];
        if(_.isEmpty(oldVal)){
          return;
        }
        if(_.isArray(oldVal.way)){
          for(var j=0;j<oldVal.way.length;j++){
            newArr.push({
              type: oldVal.way[j],
              money: oldVal.money[j],
              order_no: oldVal.order_no[j],
            });
          }
        }else{
          newArr.push({
            type: oldVal.way,
            money: oldVal.money[0],
            order_no: '123456',
          });
        }
        
        this.oddsTableData = this.oddsTableData.concat(newArr);
        this.myLotTotalZhu += oldVal.total_zushu
      },
      deep: true
    },
    data318: {
      handler(oldVal, newVal){
        let newArr = [];
        if(oldVal.data.length<1){
          return
        }
        for(var j=0;j<oldVal.data.length;j++){
          if(oldVal.data[j].uid==this.uid){
            newArr.push({
              name: '幸运28',
              type: oldVal.data[j].way,
              money: oldVal.data[j].money,
              order_no: oldVal.data[j].order_no,
            });
          }
        }
        this.oddsTableData = this.oddsTableData.concat(newArr)
        this.myLotTotalZhu+=oldVal.totalZu
        
      },
      deep: true
    },
    oddsTableData: function(newVal){
      this.myLotTotalMoney=0
      for(var i=0;i<newVal.length;i++){
      this.myLotTotalMoney+=parseInt(newVal[i].money)
      }
    },
    pcMessage: {
      handler(oldVal,newVal){
        if(oldVal.length==1){
            var that =this
            setTimeout(function(){
              that.pcMessage=[]
            },10000)
          }
      },
      deep: true
    },
    musicList:{
      handler(newVal, oldVal){
        this.jfjMusic = newVal[7].url
        this.kpMusic = newVal[8].url
        this.fpMusic = newVal[9].url
      },
      deep: true
    },
    accountData: {
      handler(newVal){
        if (newVal.is_tourist && newVal.is_tourist === 1) {
          this.isTourist = true
        }else{
          this.isTourist = false
        }
      },
      deep: true
    },
    lhcGtData: {
      handler(newVal){
        if(newVal){
          newVal.totalMoney=newVal.single_money*newVal.totalZhu
        }
      },
      deep: true
    }
  },
  deactivated() {},
  beforeDestroy() {}
};
</script>

<style scoped>
.zjphPanel{display: flex;justify-content: center;}
.zjphPanel p{font-size: 14px;margin-top: 0.2rem;}
.zjphPanel>div{text-align: center;background: #f7f7f7;padding: .133333rem .266667rem;font-size: .293333rem;border-radius: .4rem;width: 70%;color: #464646;border: solid 1px #ededed;}
.zjphItem{display: flex;justify-content: space-between;margin-bottom: 0.2rem;align-items: center;}
.zjphItem1{font-size: 14px;margin-top: 0.2rem;}
.zjphItem span{display: block;width: 25%;text-align: center;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.zjphBtn{border: 1px solid #d22727;border-radius: 4px;color: #d22727;width: 60px;cursor: pointer;}
.modalFooter{display: flex;justify-content: space-between;align-items: center;}
.modalFooter div span{color: #D32727;}
.qxgzBtn{color: #D32727 !important;background: white;border: 1px solid #D32727;border-radius: 3px;padding: 5px 12px;}
.followItem p{margin: 15px 0px;display: flex;justify-content: space-between;align-items: center;}
.followItem p img{margin-right: 5px;}
.followItem span{display: flex;align-items: center;}
.backOddsFt{display: flex;justify-content: space-between;align-items: center;}
.backOddsFt span{color: #C8313C;}
.isLoadMsg{background: rgba(0, 0, 0, 0.5);position: absolute;width: 100%;height: 100%;left: 0;top: 0;}
.rightMsgBox{animation: fadeInRightMsg forwards 1s}
.leftMsgBox{animation: fadeInLeftMsg forwards 1s}
@keyframes fadeInRightMsg{
  0%{opacity: 0;transform: translateX(20%)}
  100%{opacity: 1;transform: translateX(0%)}
}
@keyframes fadeInLeftMsg{
  0%{opacity: 0;transform: translateX(-20%)}
  100%{opacity: 1;transform: translateX(0%)}
}
.lgTitle{text-align: center;margin: 10px 0px;}
.lgPanel>div{display: flex;padding: 10px 0px;align-items: center;}
.lgPanel>div .ivu-input-number{margin: 0px 10px;}
.lgPanel>div span{color: #C8313C}
/* .lgPanel>div div:first-child{color: #999;} */
.noDataP{display: flex;align-items: center;justify-content: center;margin: 20px 0px;}
.flTable{width: 100%;border-collapse: collapse;border-spacing: 0px;}
.flTable tr{line-height: 32px;}
.flTable th{border: 1px solid #eee;}
.flTable td{text-align: center;border: 1px solid #EEEEEE;}
.flGtBtn{background: #C8313C;color: white;border: 0px;width: 50px;height: 24px;border-radius: 5px;cursor: pointer;}
.flListPanel{position: absolute;width: 100%;height: 706px;;z-index: 9;background: white;animation: fadePanel 1s forwards;opacity: 0;}

.flTitle{background: #F9F9F9;color: #78788C;display: flex;align-items: center;justify-content: space-between;padding: 8px;}
.flTitle img{width: 24px;}
.flBox{box-shadow:0px 1px 0px 0px rgba(0,0,0,0.11);padding: 15px;}
.flBoxTlt{display: flex;justify-content: space-between;align-items: center;}
.flBoxTlt div{display: flex;align-items: center;}
.flBoxTlt img{width: 50px;height: 50px;border-radius: 50%;margin-right: 5px;}
.flBoxTlt .levelImg{width: 80px;height: 30px;position: relative;bottom: 3px}
.flBoxTlt button{background: white;border: 1px solid #C8313C;color: #C8313C;height: 30px;border-radius: 4px;width: 80px;cursor: pointer;}
.flBox>p{text-align: center;color: #909090;align-items: center;display: flex;justify-content: center;margin-bottom: 10px;}
.flBox>p img{margin-right: 6px;width: 16px;}
.voiceImg{position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 100;background: #000000;opacity: .5;padding: 20px;border-radius: 6px;}
.oddsListTle{background: #f8f8f9;overflow: hidden;border: 1px solid #e9eaec;height: 40px;line-height: 40px;font-weight: bold;color: #495060}
.oddsListTle>div{width: 33.333%;text-align: center;float: left}
.oddsListBox{border: 1px solid #e9eaec;border-top: 0px;color: #495060;overflow: hidden;height: 48px;line-height: 48px;}
.oddsListBox>div{width: 33.333%;text-align: center;float: left;text-align: center;}
.oddsListBox>div img{display: block;margin: 0 auto;margin-top: 17px;cursor: pointer}
.playAgain{position: absolute;bottom: 54px;width: 100%;overflow: hidden;height: 54px;right: 0px;}
.plagSlide{animation: plagSlide 1s forwards;display: flex;align-items: center;background: #FCF9ED;padding: 10px;padding-left: 0px;position: absolute;bottom: 0px;right: 0px;width: 100%}
.paText{width: 100%;text-align: center}
.paText>img{vertical-align: bottom}
.paText>span{color: #4A90E2;cursor: pointer}
.paText>span>span{color: #F3596A}
.goBottom{position: absolute;top: -50px;z-index: 98;cursor: pointer;right: 30px;}
.pcPanel{overflow: hidden;width: 100%;height: 300px;position: absolute;}
.zjPcBox{animation: pcSlide 10s forwards;position: absolute;z-index: 9;}
.zjPcBox>img{width: 80px;height: 40px}
.pcContent{border-radius: 30px;display: flex;align-items: center;color: white;height: 40px;line-height: 40px;background: rgba(0, 0, 0, 0.5);padding: 0px 10px}
.pcContent img{width: 30px;height: 30px;margin-right: 10px}
.pcContent div{white-space: nowrap;}
.pcName{color: #00FFEA}
.pcMoney{color: #FFD200}
.pcBoxIndex1{top: 0px}
.pcBoxIndex2{top: 80px}
.pcBoxIndex3{top: 160px}
.pcBoxIndex4{top: 240px}

@keyframes pcSlide {
  0%{right: -100%}
  10%{right: 20%}
  60%{right: 20%}
  100%{right: 100%}
}
@keyframes plagSlide {
  0%{right: -100%}
  80%{right: 0%}
  85%{transform: translateY(-10px)}
  90%{transform: translateY(0px)}
  95%{transform: translateY(-10px)}
  100%{transform: translateY(0px)}

}
.choosetoplayright {
  border-left: 1px solid #eee;
  height: 100%;
  position: relative;
  background: #fbfbfb;
  transform: translateX(100%);
  animation: rightSlide 1s forwards;
}
.choosetoplayright .chatcontent {
  height: 760px;
  overflow-y: scroll;
  position: absolute;
  width: 100%
}
.choosetoplayright .chatcontent .chat ul .systemmsg {
  margin: 10px 0px;
  min-width: 500px;
  display: flex;
}
.chat {
  margin-bottom: 60px;
}
.chat ul {
  padding: 0px 10px;
}
.choosetoplayright .chatcontent .chat ul .systemmsg pre {
  margin: 0 auto;
  max-width: 420px;
  font-family: PingFangSC;
  font-size: 12px;
  letter-spacing: 0.1px;
  text-align: center;
  color: #464646;
  white-space: pre-wrap; /*css-3*/
  white-space: -moz-pre-wrap; /*Mozilla,since1999*/
  white-space: -pre-wrap; /*Opera4-6*/
  white-space: -o-pre-wrap; /*Opera7*/
  word-wrap: break-word;
  padding: 10px 20px;
  background-color: #f7f7f7;
  border: solid 1px #ededed;
  border-radius: 6px;
}
.kjkgPanel pre{text-align: left !important}
.choosetoplayright .chatcontent .chat ul .robotmsg {
  font-family: PingFangSC;
  font-size: 14px;
  margin-left: 18px;
  margin-top: 10px;
  display: flex;
}
.choosetoplayright .chatcontent .chat ul .robotmsg img {
  border-radius: 14px;
  margin-left: -15px;
  margin-right: 15px;
  border-radius: 50%;
}
.choosetoplayright .chatcontent .chat ul .robotmsg div .word {
  padding: 0 15px;
  height: 42px;
  border-radius: 1.8px;
  background-color: #ffffff;
  border: solid 1px #dddddd;
  line-height: 42px;
}
.choosetoplayright .chatcontent .chat ul .robotmsg div p em {
  display: inline-block;
  height: 20px;
  width: 54px;
}
.choosetoplayright .chatcontent .chat ul .robotmsg div table {
  padding: 0;
  margin-top: 5px;
  min-width: 375px;
  border-radius: 2px;
  background-color: #eee;
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.08),
    inset 0 2px 0 0 rgba(255, 255, 255, 0.5);
  border: solid 1px #C3CAE4;
  text-align: center;
  border-collapse: collapse;
}
.choosetoplayright .chatcontent .chat ul .robotmsg div table tbody {
  background-color: white;
}
.choosetoplayright
  .chatcontent
  .chat
  ul
  .robotmsg
  div
  table
  tbody
  tr:last-child {
  background-color: #fbfbfb;
  border: 0;
}
.choosetoplayright .chatcontent .chat ul .robotmsg div table tr {
  height: 33px;
  border-bottom: 1px solid #eee;
}
.choosetoplayright .chatcontent .chat ul .robotmsg div table td,
.choosetoplayright .chatcontent .chat ul .robotmsg div table th {
  padding: 0;
}
.choosetoplayright .chatcontent .chat ul .robotmsg div table td s,
.choosetoplayright .chatcontent .chat ul .robotmsg div table th s {
  display: inline-block;
  width: 18px;
  height: 13px;
  /* background: url("../../../assets/images/spirt.png") 0 222px; */
}
.choosetoplayright .chatcontent .chat ul .robotmsg div table .total {
  display: inline-block;
  margin-left: -35px;
}
.choosetoplayright .chatcontent .chat ul .robotmsg div table .total span {
  color: #f3596a;
}
.choosetoplayright .chatcontent .chat ul .robotmsg div table .followbet {
  width: 65px;
  height: 23px;
  border-radius: 2px;
  color: #f3596a;
  border: 0;
  background: transparent;
  border: 1px solid #f3596a;
  cursor: pointer;
  padding: 0px;
}
.choosetoplayright .chatcontent .chat ul .robotmsg div .chatword {
  margin-top: 5px;
  background-color: #fbfbfb;
  line-height: 40px;
  border: 1px solid #ccc;
  min-width: 605.7px;
  font-size: 14px;
}
.choosetoplayright .chatcontent .chat ul .usermsg {
  font-family: PingFangSC;
  font-size: 14px;
  margin-right: 18px;
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  border-radius: 1.8px;
}
.choosetoplayright .chatcontent .chat ul .usermsg .chatword {
  margin-top: 5px;
  background-color: #f9f9dc;
  line-height: 42px;
}
.choosetoplayright .chatcontent .chat ul .usermsg img {
  border-radius: 50%;
  margin-right: -15px;
  margin-left: 15px;
}
.choosetoplayright .chatcontent .chat ul .usermsg div {
  float: right;
}
.choosetoplayright .chatcontent .chat ul .usermsg div .word {
  margin-top: 5px;
  padding: 0 15px;
  line-height: 42px;
  border-radius: 1.8px;
  background-color: #f9f9dc;
  border: solid 1px #f5f0d1;
  text-align: left;
  word-wrap:break-word;
  max-width: 600px;
}
.choosetoplayright .chatcontent .chat ul .usermsg div p {
  text-align: right;
}
.choosetoplayright .chatcontent .chat ul .usermsg div p em {
  display: inline-block;
  height: 20px;
  width: 54px;
  vertical-align: sub;
}
.choosetoplayright .chatcontent .chat ul .usermsg div table {
  border-collapse: collapse;
  background-color: #f9f9dc !important;
  padding: 0;
  margin-top: 5px;
  min-width: 375px;
  border-radius: 2px;
  background-color: #fbfbfb;
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.08),
    inset 0 2px 0 0 rgba(255, 255, 255, 0.5);
  border: solid 1px #F2DF60;
  text-align: center;
  position: relative;
}
.choosetoplayright .chatcontent .chat ul .usermsg div table tr {
  height: 33px;
  line-height: 33px;
  border-bottom: 1px solid #eee;
}
.choosetoplayright .chatcontent .chat ul .usermsg div table tbody {
  background-color: #fff;
}
.choosetoplayright
  .chatcontent
  .chat
  ul
  .usermsg
  div
  table
  tbody
  tr:last-child {
  border: 0;
  background-color: #f9f9dc;
}
.choosetoplayright .chatcontent .chat ul .usermsg div table td,
.choosetoplayright .chatcontent .chat ul .usermsg div table th {
  padding: 0;
}
.choosetoplayright .chatcontent .chat ul .usermsg div table td s,
.choosetoplayright .chatcontent .chat ul .usermsg div table th s {
  display: inline-block;
  width: 18px;
  height: 13px;
  /* background: url("../../../assets/images/spirt.png") 0 222px; */
}
.choosetoplayright .chatcontent .chat ul .usermsg div table .total {
  float: left;
  margin-left: 10px;
  background-color: #f9f9dc;
}
.choosetoplayright .chatcontent .chat ul .usermsg div table .total span {
  color: #f3596a;
}
.choosetoplayright .chatcontent .chat ul .usermsg div table .followbet {
  width: 65px;
  height: 23px;
  border-radius: 2px;
  background-color: #f9f9dc;
  border: 1px solid #f3596a;
  color: #f3596a;
  cursor: pointer;
  padding: 0px;
}
.followbet:disabled{
  color: #bbbec4 !important;
  border-color: #dddee1 !important;
  cursor: not-allowed !important; 
}
.sendmsg {
  border-top: 1px solid #eee;
  height: 54px;
  display: flex;
  justify-content: space-between;
  padding: 0px 10px;
  position: absolute;
  bottom: 0;
  width: 605px;
  z-index: 2;
  background: #eee;
}
.sendmsg .inp {
  display: inline-block;
  margin-top: 9px;
  height: 38px;
  line-height: 38px;
  
}

.sendmsg .sendbtn {
  margin-top: 9px;
  margin-left: 15px;
  width: 87px;
  height: 38px;
  line-height: 38px;
  border-radius: 2px;
  box-shadow: 0 -5px 4px 0 rgba(188, 199, 255, 0.15);
  border: 0;
  padding: 0;
  color: white;
  font-size: 16px;
  cursor: pointer;
}
.mipaibet {
  width: 27px;
  height: 84px;
  background: linear-gradient(
    180deg,
    rgba(223, 92, 210, 1),
    rgba(180, 88, 221, 1)
  );
  border-radius: 2px;
  position: absolute;
  top: 141px;
  right: -29px;
  color: white;
  text-align: center;
  cursor: pointer;
  transform: translateX(calc((100vw - 1200px) / 2));
  animation: rightSlide 1s forwards .2s;
}
.mipaibet span {
  /* background: url(../../../assets/images/mi.png)no-repeat; */
  width: 13px;
  height: 13px;
  margin-top: 15px;
  display: inline-block;
}
.choosetoplayright .wenlu{
  position: absolute;
  right: -29px;
  top: 51px;
  width:27px;
  height:84px; 
  background:linear-gradient(180deg,rgba(223,92,103,1),rgba(221,88,88,1));
  box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.5);
  border-radius: 2px;
  text-align: center;
  font-size: 13px;
  cursor: pointer;
  color: white;
  transform: translateX(calc((100vw - 1200px) / 2));
  animation: rightSlide 1s forwards;
}
.wenlu p{width: 80%;margin: 0 auto;}
.wenlu span{
  /* background: url(../../../assets/images/wenlu.png)no-repeat; */
  width: 13px;
  height: 13px;
  margin-top: 15px;
  display: inline-block;
}
.choosetoplayright .thisbet,
.choosetoplayright .mybet,
.choosetoplayright .closevoice,
.myFollow {
  position: absolute;
  width: 27px;
  height: 115px;
  border-radius: 2px;
  right: -29px;
  text-align: center;
  font-size: 13px;
  cursor: pointer;
  color: white;
}
.choosetoplayright .thisbet pre,
.choosetoplayright .mybet pre,
.choosetoplayright .closevoice pre {
  width: 20.5px;
  height: 64px;
  font-family: PingFangSC;
  font-size: 13px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.23;
  letter-spacing: 0.2px;
  text-align: center;
  color: #fbfbfb;
  margin-left: 3.5px;
  margin-top: 5px;
}
.choosetoplayright .thisbet {
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
  background-image: linear-gradient(to bottom, #ebb95b, #bfa065);
  border: solid 1px #d78c00;
  top: 230px;
  transform: translateX(calc((100vw - 1200px) / 2));
  animation: rightSlide 1s forwards .4s;
}

.choosetoplayright .thisbet span {
  margin-top: 15px;
  display: inline-block;
  width: 13px;
  height: 13px;
  /* background: url("../../../assets/images/spirt.png") 0px -119px; */
}
.choosetoplayright .mybet {
  top: 350px;
  background-image: linear-gradient(to bottom, #56d0fb, #6a89d5);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
  border: solid 1px #53a8ff;
  transform: translateX(calc((100vw - 1200px) / 2));
  animation: rightSlide 1s forwards .6s;
}
.choosetoplayright .mybet span {
  margin-top: 15px;
  display: inline-block;
  width: 13px;
  height: 13px;
  /* background: url("../../../assets/images/spirt.png") 0px -101px; */
}
.choosetoplayright .closevoice {
  top: 590px;
  /* top: 470px; */
  background-image: linear-gradient(to bottom, #7fdd7b, #58dd85);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
  border: solid 1px #57d07d;
  transform: translateX(calc((100vw - 1200px) / 2));
  animation: rightSlide 1s forwards 1s;
}
.myFollow{
  top: 470px;
  background:linear-gradient(135deg,rgba(97,241,255,1),rgba(26,87,202,1));
  box-shadow:0px 1px 1px 0px rgba(0,0,0,0.5);
  font-size: 13px;
  border: solid 1px rgba(26,87,202,1);
  transform: translateX(calc((100vw - 1200px) / 2));
  animation: rightSlide 1s forwards .8s;
}
.myFollow img {
  margin-top: 15px;
  display: inline-block;
  width: 13px;
  height: 13px;
}
.choosetoplayright .closevoice img {
  margin-top: 15px;
  display: inline-block;
  width: 13px;
  height: 13px;
}
.tableTip{
  text-align:left;float:left;line-height:32px;
}
.gtHeader{display: flex;align-items: center;justify-content: space-between;}
.gtHeader button{border: 1px solid #f3596a;color: #f3596a;background: white;float: right;width: 80px;height: 32px;border-radius: 5px;}
.gtHeader span span{
  color: #5DB2FF;
  padding: 0px 4px;
}
.tableTip span{
  color: #F3596A;
  padding: 0px 4px;
}
.allBackStyle{
  background: #000 !important;
  opacity: .5;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.allBackStyle img{
  width: 40px;
  height: 40px;
  margin: 0px !important;
  border-radius: 0px !important;
}
.isBackOdd{
  text-decoration:line-through;
}
.zhTableTitle{
  overflow: auto;
  padding: 5px 0px;
  line-height: 24px;
}
.zhTableTitle .way{
  color: #4A90E2;
}
.zhTableTitle .time{
  margin-left: 10px;
  color: #999999;
}
.zhTableTitle .cdBtn{
  float: right;
  border: 1px solid #F3596A;
  color: #F3596A;
  width: 60px;
}
.noConent{
  height: 200px;
  line-height: 200px;
  text-align: center;
}
.zhTable{
  margin-bottom: 20px;
}
.zhTable:last-child{
  margin: 0px;
}
.levelImg{
  width: 40px;
  height: 18px;
  vertical-align: sub;
  display: inline-block;
  margin: 0 5px;
}
.levelImg1{
  width: 24px;
  height: 16px;
  /* background: url("../../../assets/images/room/slevel01@2x.png")no-repeat; */
  background-size: 100% 100%;
}
.levelImg2{
  /* background: url("../../../assets/images/room/slevel02@2x.png")no-repeat; */
  background-size: 100% 100%;
}
.levelImg3{
  /* background: url("../../../assets/images/room/slevel03@2x.png")no-repeat; */
  background-size: 100% 100%;
}
.levelImg4{
  /* background: url("../../../assets/images/room/slevel04@2x.png")no-repeat; */
  background-size: 100% 100%;
}
.levelImg5{
  /* background: url("../../../assets/images/room/slevel05@2x.png")no-repeat; */
  background-size: 100% 100%;
}
.levelImg6{
  /* background: url("../../../assets/images/room/slevel06@2x.png")no-repeat; */
  background-size: 100% 100%;
}
.levelImg7{
  /* background: url("../../../assets/images/room/slevel07@2x.png")no-repeat; */
  background-size: 100% 100%;
}
.levelImg8{
  /* background: url("../../../assets/images/room/slevel08@2x.png")no-repeat; */
  background-size: 100% 100%;
}
.levelGif1{
  /* background: url("../../../assets/images/levelGif1.png")no-repeat; */
  background-size: 100% 100%;
}
.levelGif2{
  /* background: url("../../../assets/images/levelGif2.png")no-repeat; */
  background-size: 100% 100%;
}
.levelGif3{
  /* background: url("../../../assets/images/levelGif3.gif")no-repeat; */
  background-size: 100% 100%;
}
.levelGif4{
  /* background: url("../../../assets/images/levelGif4.gif")no-repeat; */
  background-size: 100% 100%;
}
.levelGif5{
  /* background: url("../../../assets/images/levelGif5.gif")no-repeat; */
  background-size: 100% 100%;
}
.levelGif6{
  /* background: url("../../../assets/images/levelGif6.gif")no-repeat; */
  background-size: 100% 100%;
}
.levelGif7{
  /* background: url("../../../assets/images/levelGif7.gif")no-repeat; */
  background-size: 100% 100%;
}
.levelGif8{
  /* background: url("../../../assets/images/levelGif8.gif")no-repeat; */
  background-size: 100% 100%;
}
.tableNoData{
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.chat-room{
  width: 100%;
}
@keyframes rightSlide {
    0%{}
    100%{transform: translateX(0);}
}
.timeBox{
  margin-top: 15px;
  width: 100%;
}
.timeBox span{
  padding: 2px 15px;
  background: #ded9d9;
  color: white;
  border-radius: 9px;
  text-align: center;
  display: block;
  width: 160px;
  margin: 0 auto;
  font-size: 12px
}
.zhmsg table tr:last-child{
  background-color: #dffcc0 !important;
}
.zhmsg table tr{
  background: #f2fde5 !important;
}
.zhInfo{
  text-align: center !important;
}
.zhInfo span{
  color: #F3596A;
}
/* s{display: inline-block;width: 18px;height: 13px;background: url("../../../assets/images/spirt.png") 0 222px;} */
.usermsg table{max-width: 400px;}
.orderTwoTd{max-width: 100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.chatcontent{overflow: hidden;}
</style>
<style>
.flListPanel .ivu-scroll-container{height: 100% !important;}
.flListPanel .ivu-scroll-wrapper{height: 100% !important;}
.ctlHeight .ivu-table-body{
    max-height: 460px !important;
    overflow-x: hidden;
}
.zhModal .ivu-modal{
  width: 560px !important;
}
.zhModal .ivu-modal-body{height: 550px;overflow: auto;}
.oddsTbSrl .ivu-scroll-container{
  height: auto !important;
  max-height: 300px;
}
.ivu-scroll-loader{
  position: absolute;
  bottom: 0px;
  width: 100%;
}
.inp .ivu-input{border-color: #999;}
.ctlHeight .ivu-modal-header{padding: 8px 16px;}
.ctlHeight .ivu-modal-header p{height: auto;}
</style>



// WEBPACK FOOTER //
// src/components/room/chatRoom/chatRoom.vue